<template>
  <el-row :gutter="20">
    <!-- 左侧 -->
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <!-- 用户信息 -->
        <el-card shadow="hover">
          <div class="user-info">
            <div class="info-up">
              <img src="@/assets/images/f1.png" alt="f1.png" />
              <div>
                <p class="name">Admin</p>
                <p class="access">超级管理员</p>
              </div>
            </div>
            <div class="info-down">
              <div>上次登录时间: <span>2021-11-11</span></div>
              <div>上次登录地点: <span>武汉</span></div>
            </div>
          </div>
        </el-card>
        <!-- Table数据展示 -->
        <el-card shadow="hover" style="height: 350px; margin-top: 20px">
          <el-table :data="tableData" max-height="300">
            <el-table-column
              v-for="(v, k) in tableLable"
              :key="k"
              :prop="k"
              :label="v"
            ></el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-col>
    <!-- 右侧 -->
    <el-col :span="16">
      <div class="grid-content bg-purple count-info">
        <div class="count">
          <el-card
            v-for="v in countData"
            :key="v.name"
            shadow="hover"
            :body-style="{ display: 'flex', padding: 0 }"
          >
            <i
              class="icon"
              :style="{ backgroundColor: v.color }"
              :class="`el-icon-${v.icon}`"
            ></i>
            <div>
              <div class="name">￥ {{ v.value }}</div>
              <div class="value">{{ v.name }}</div>
            </div>
          </el-card>
        </div>
        <el-card shadow="hover" class="big-chart">
          <div class="chart1" ref="chart1"></div>
        </el-card>
        <div class="mini-chart">
          <el-card shadow="hover">
            <div ref="miniChart1" class="mini-chart1">

            </div>
          </el-card>
          <el-card shadow="hover">
            <div ref="miniChart2" class="mini-chhart2">

            </div>
          </el-card>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from "vuex";
// 按需引入echarts
import echarts from "@/echarts";
export default {
  data(){
    return {
      chart1Series:[],
      miniChart1XAxis:[],
      miniChart1Series:[],
    }
  },
  name: "Home",
  mounted() {
    this.getData().then(()=>{
      this.initChart1Series()
      this.initMiniChart1()
      this.getChart1();
      this.getMiniChart1()
      this.getMiniChart2()
    })
    
  },
  methods: {
    async getData() {
      const res1 = await this.$store.dispatch("home/getBaseData");
      const res2 = await this.$store.dispatch("home/getChartsData");
      return Promise.all([res1,res2])
    },
    // 绘制图表1
    getChart1() {
      const chart1Node = this.$refs.chart1;
      const chart1 = echarts.init(chart1Node);
      // 绘制图表
      chart1.setOption({
        title: {
          text: "本周购买量",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.orderData.date,
        },
        yAxis: {
          type: "value",
        },
        series: this.chart1Series
      });
    },
    initChart1Series(){
      const values = this.orderData.data || ['']
      const names = Object.keys(values[0])
      names.forEach(key=>{
        this.chart1Series.push({
          name:key,
          data:values.map(v=>v[key]),
          type:'line'
        })
      })
      
    },
    // 绘制图表2
    getMiniChart1(){
      const miniChart1Node = this.$refs.miniChart1
      const miniChart1 = echarts.init(miniChart1Node)
      miniChart1.setOption({
        title: {
          text: "每周统计",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.miniChart1XAxis,
        },
        yAxis: {
          type: "value",
        },
        series: this.miniChart1Series
      })
    },
    initMiniChart1(){
      const userData = this.userData 
      this.miniChart1XAxis = userData.map(v=>v.date)
      const names = Object.keys(userData[0]).slice(1)

      this.miniChart1Series = names.map(key=>{
        return {
          name:key,
          type:'bar',
          data:userData.map(v=>v[key])
        }
      })

      

      
    },
    getMiniChart2(){
      const miniChart2Node = this.$refs.miniChart2
      const miniChart2 = echarts.init(miniChart2Node)
      miniChart2.setOption({
        tooltip:{},
        series: [
          {
            type: 'pie',
            data: this.vedioData
          }
        ]
})
    },
  },
  computed: {
    ...mapGetters("home", [
      "countData",
      "tableData",
      "orderData",
      "vedioData",
      "userData",
      "tableLable",
    ]),
  },

};
</script>

<style lang='less' scoped>
.user-info {
  .info-up {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #999999;
    padding-bottom: 20px;
    img {
      height: 100px;
      width: 100px;
      border-radius: 50%;
    }
    div {
      margin-left: 30px;
      .name {
        font-size: 25px;
      }
      .access {
        color: #999999;
      }
    }
  }
  .info-down {
    margin-top: 15px;
    div {
      line-height: 30px;
      color: #999999;
      span {
        margin-left: 60px;
      }
    }
  }
}
.count-info {
  .count {
    min-width: 800px;
    display: flex;
    flex-wrap: wrap;
    .icon {
      width: 80px;
      height: 80px;
      color: white;
      text-align: center;
      line-height: 80px;
    }
    div {
      margin-left: 8px;
      margin-right: 20px;
      .value {
        color: #999999;
        font-size: 15px;
      }
      .name {
        margin-top: 25px;
        font-size: 25px;
      }
    }
  }
  .big-chart {
    width: 100%;
    min-height: 200px;
    height: 230px;
    margin-top: 10px;
    .chart1 {
      width: 100%;
      height: 200px;
    }
  }
  .mini-chart {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .el-card {
      width: 48%;
      min-height: 100px;
      height: 200px;
      div{
        width: 100%;
        height: 200px;
      }
    }
  }
}
</style>